<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="VIP会员"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </van-sticky>
    <div class="box">
      <img src="/mine/vip01.jpg" alt="" />
      <img src="/mine/vip02.jpg" alt="" @click="showVip" />
      <img src="/mine/vip03.jpg" alt="" />
    </div>
    <!-- 确认弹窗 -->
    <van-dialog
      v-model="vip_show"
      title="确定购买吗"
      show-cancel-button
      :before-close="becomeVip"
    >
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      vip_show: false,
      uid: sessionStorage.getItem("uid"),
    };
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user.userInfo }),
  },
  mounted() {
    this.$store.dispatch("getUserInfo", sessionStorage.getItem("uid"));
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 展示弹窗
    showVip() {
      if (this.uid) {
        if (this.userInfo.is_vip >= 1) {
          Toast.fail("您已是会员");
        } else {
          this.vip_show = true;
        }
      } else {
        Toast.fail("请先登录");
        setTimeout(() => {
          this.$router.push("/login");
        }, 1000);
      }
    },
    // 成为会员
    becomeVip(action, done) {
      if (action === "confirm") {
        this.updateVip();
        Toast.success("购买成功");
        done();
      } else {
        done();
      }
    },
    updateVip() {
      let url = `/users/user_members?uid=${this.uid}&vip=1`;
      this.axios.get(url).then((res) => {
        // console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon-arrow-left:before {
  color: #333;
}
::v-deep .van-hairline--bottom::after {
  border-bottom-width: 0px;
}
.box {
  display: flex;
  flex-direction: column;
  background-color: #333;
  img {
    width: 100vw;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

.black_card {
  position: fixed;
  margin: 20px auto;
  width: 90vw;
  height: 200px;
  border-radius: 20px;
  background-color: #333;
  box-shadow: 0 10px 20px rgba($color: #000, $alpha: 0.15);
  p {
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 28px;
  }
}
</style>